﻿@model ChurchDiary.TableEntity.EntityLabels

<script src="~/Scripts/ChurchControllers/BaptismController.js"></script>
<div class="row" ng-controller="BaptismController">
    <div class="search-bar collapsed">
        <div class="form-group">
            <div class="input-group input-group-lg">
                <input type="text" class="form-control" placeholder="Type to search..." ng-model="search" ng-change="filter()">
                <span class="input-group-btn">
                    <button class="btn btn-square btn-lg btn-default no-shadow close-search-bar" type="button"><i class="zmdi zmdi-close"></i></button>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="bg-white bs-0 mb-20 widget">
            <ul class="nav nav-pills bg-black bs-inset-primary" role="tablist">
                <li role="presentation" class="pt-15 pb-15 pl-10 pr-20 mb-0">
                    <h3 class="fs-16 lh-1 m-0 text-white text-uppercase">@Html.LabelFor(m => m.FamilyList)</h3>
                </li>
                <li class="pull-right pt-15 pb-15 pl-20 pr-10 fs-20 lh-1 mb-0">
                    <ul class="pull-right list-inline fs-16 lh-1 mb-0">

                        <li><a href="javascript:;" class="text-white" ng-click="toggle('add','')"><i class="fa fa-plus-circle"></i></a></li>
                    </ul>
                </li>
            </ul>
            <div class="widget-body">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <th>Name&nbsp;<a ng-click="sort_by('family.ChurchName');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Date Of Baptisam&nbsp;<a ng-click="sort_by('family.OrganizationPartition.PartitionName');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Email&nbsp;<a ng-click="sort_by('family.Designation.DesignationName');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Phone&nbsp;<a ng-click="sort_by('family.ChurchContact.ContactNo');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Family Name&nbsp;<a ng-click="sort_by('family.Email');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Name Of Baptiser&nbsp;<a ng-click="sort_by('family.Email');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>@Html.LabelFor(m => m.Action)&nbsp;</th>
                            </thead>
                            <tbody>
                                <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                                    <td>{{data.Name}}</td>
                                    <td>{{data.DateOfBaptism}}</td>
                                    <td>{{data.Email}}</td>
                                    <td>{{data.Phone}}</td>
                                    <td>{{data.FamilyName}}</td>
                                    <td>{{data.NameOfBaptizer}}</td>
                                    <td>
                                        <div class="btn-group-sm" role="group" aria-label="Second group">
                                            <button type="button" class="btn btn-info waves-effect" ng-click="toggle('edit',data.BaptismId);"><i class="fa fa-pencil"></i></button>
                                            <button type="button" class="btn btn-danger waves-effect" ng-click="delete(data.Name,data.BaptismId)"><i class="fa fa-trash"></i></button>
                                            <a target="_blank" class="btn btn-success waves-effect" href="Baptism/PrintBaptism?BaptismId={{data.BaptismId}}"><i class="fa fa-print"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-12" ng-show="filteredItems == 0">
                        <div class="col-md-12" style="text-align: center;">
                            <h4>@Html.LabelFor(c => c.NoData)</h4>
                        </div>
                    </div>
                </div>
                <div ng-show="filteredItems > 0" style="padding-right: 10px; text-align: right;">
                    <div pagination="" page="currentPage" max-size="10" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-panel" tabindex="-1" id="Baptism" role="dialog" aria-labelledby="myPanelModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myAnimationModalLabel">{{title}}</h4>
                </div>
                <form name="fromvalidate" novalidate>
                    <div class="modal-body">
                        <div class="form-group autocomplete" style="text-align:right;">
                            <button class="btn btn-primary" ng-click="selectMember()">Select Member</button>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.Name)
                            <input type="text" class="form-control" name="Name" ng-model="Baptism.Name" maxlength="100" ng-minlength="3" ng-required="true">
                            <p class="error" ng-show="fromvalidate.Name.$error.minlength">@Html.LabelFor(m => m.Name) @Html.LabelFor(m => m.Atleast4Charater)</p>
                        </div>
                        <div class="form-group">
                            <input type="hidden" value="Baptism.FamilyId" />
                            <input type="hidden" value="Baptism.FamilyNo" />
                            <input type="hidden" value="Baptism.MemberId" />
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.FamilyName)
                            <input type="text" class="form-control" name="FamilyName" ng-model="Baptism.FamilyName" maxlength="100" ng-minlength="3" ng-required="true">
                            <p class="error" ng-show="fromvalidate.FamilyName.$error.minlength">@Html.LabelFor(m => m.FamilyName) @Html.LabelFor(m => m.Atleast4Charater)</p>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.DateOfBirth)
                            <input type="text" calendar class="form-control" name="FamilyName" ng-model="Baptism.DateOfBirth" ng-required="true">
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.DateOfSalvation)
                            <input type="text" calendar class="form-control" name="DateOfSalvation" ng-model="Baptism.DateOfSalvation" ng-required="true">
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.TelephoneNo)
                            <input type="text" class="form-control" name="TelephoneNo" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" ng-model="Baptism.Phone" maxlength="12">
                            <p class="error" ng-show="fromvalidate.TelephoneNo.$error.pattern">@Html.LabelFor(m => m.InvalidTelephone)</p>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.Email)
                            <input type="email" class="form-control" name="email" ng-model="Baptism.Email">
                            <p class="error" ng-show="fromvalidate.email.$error.email">@Html.LabelFor(m => m.InvalidEmail)</p>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.Gender)
                            <select ng-model="Baptism.Gender" class="form-control" ng-required="true" name="relation" ng-options="obj.Gender as obj.GenderName for obj in Genders">
                            </select>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.PresentCountry)
                            <select ng-model="Baptism.CountryId"
                                ng-options="obj.CountryId as obj.CountryName for obj in countries"
                                class="form-control" ng-required="true">
                            </select>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.PresentState)
                            <select ng-model="Baptism.StateId"
                                ng-options="obj.StateId as obj.StateName for obj in states"
                                class="form-control"
                                ng-required="true">
                            </select>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.PresentCity)
                            <input type="text" class="form-control" name="DateOfApplication" ng-model="Baptism.AddressLine1">
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.PresentAddress)
                            <textarea class="form-control" name="PresentAddress" ng-model="Baptism.AddressLine2" maxlength="100" ng-required="true"></textarea>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.Pincode)
                            <input type="text" class="form-control" name="Pincode" ng-model="Baptism.Pincode" ng-maxlength="6" ng-minlength="6">
                            <p class="error" ng-show="fromvalidate.Pincode.$error.minlength">@Html.LabelFor(m => m.InvalidPincode)</p>
                            <p class="error" ng-show="fromvalidate.Pincode.$error.maxlength">@Html.LabelFor(m => m.InvalidPincode)</p>
                        </div>

                        <div class="form-group">
                            <label> Name Of Church Worker</label>
                            <input type="text" class="form-control" name="NameOfChurchworker" ng-model="Baptism.NameOfChurchworker" ng-required="true">
                        </div>
                        <div class="form-group">
                            <label> No of Year attending this church</label>
                            <input type="text" class="form-control" name="Notes" ng-model="Baptism.AttendingYears">
                        </div>
                        <div class="form-group">
                            <label> Remarks</label>
                            <textarea class="form-control" name="AttendingYears" ng-model="Baptism.Notes"></textarea>
                        </div>
                        <div class="form-group">
                            <label> Name Of Baptizer</label>
                            <input type="text" class="form-control" name="Name" ng-model="Baptism.NameOfBaptizer" maxlength="100" ng-minlength="3" ng-required="true">
                            <p class="error" ng-show="fromvalidate.Name.$error.minlength">@Html.LabelFor(m => m.Name) @Html.LabelFor(m => m.Atleast4Charater)</p>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.DateOfBaptism)
                            <input type="text" calendar class="form-control" name="DateOfSalvation" ng-model="Baptism.DateOfBaptism" ng-required="true">
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.PlaceOfBaptism)
                            <input type="text" class="form-control" name="PlaceOfBaptism" ng-model="Baptism.PlaceOfBaptism" ng-required="true">
                        </div>
                        <div class="form-group">
                            <label>Church Name</label>
                            <input type="text" class="form-control" name="ChurchName" ng-model="Baptism.ChurchName">
                        </div>
                        <div class="form-group">
                            <label>Date Of Application</label>
                            <input type="text" calendar class="form-control" name="ChurchName" ng-model="Baptism.DateOfApplication">
                        </div>
                        <div class="form-group">
                            <label>Application Image</label>
                            <input type="file" name="fileInput" id="Input" onchange="angular.element(this).scope().fileChanged(event)" class="upload" accept="image/*">
                        </div>
                        <img src="~/Images/_loadImage.png" actual-image="{{Baptism.ApplicationImage}}" on-error-src="~/Images/_NoImge.png" style="width:100%;">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" ng-disabled="fromvalidate.$invalid || buttonstate" ng-click="save(modelstate);">Save</button>
                        <button type="button" class="btn btn-primary" ng-disabled="fromvalidate.$invalid || buttonstate" ng-click="save(modelstate);">Save & Print</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-panel" tabindex="-1" id="SelectMember" role="dialog" aria-labelledby="myPanelModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myAnimationModalLabel1">Select Members</h4>
                </div>
                <form name="fromvalidate2" novalidate>
                    <div class="modal-body">
                        <div class="form-group autocomplete">
                            <label> Select Member</label>
                            <input type="text" class="form-control" placeholder="Enter Name / Family Name / Family No / Member No" ng-change="GetFamilyMemberOnSearch(searchkey)" ng-model="searchkey" name="Name" ng-required="true">
                            <div class="textboxautocomplete">
                                <div class="textboxautocomplete-familyrow" ng-repeat="data in familydetails">
                                    <div class="textboxautocomplete-familyhead">{{data.FamilyName}} ({{data.FamilyMembers.length}})</div>
                                    <div class="textboxautocomplete-nomembers" ng-if="data.FamilyMembers.length==0">No Family Member found</div>
                                    <div class="textboxautocomplete-familymemberdetails" ng-click="GetValues(datas,data,$index);" ng-if="data.FamilyMembers.length>0 && datas.IsBaptized=='NO'" ng-repeat="datas in data.FamilyMembers" ng-class="{activerow : datas.MemberId== selectedidx}">
                                        <div class="textboxautocomplete-image">
                                            <img src="~/Images/_NoImge.png" />
                                        </div>
                                        <div class="textboxautocomplete-details">
                                            <div>Name: {{datas.Name}}</div>
                                            <div>Relationship: {{datas.RelationShip.RelationShipName}} | <span>Family No : {{data.FamilyNo}}</span></div>
                                            <div><span>Age: {{datas.CurrentAge}}</span> | <span>Is Baptism : {{datas.IsBaptized}}</span> | <span>Holy Sprit: {{datas.IsGetHgBaptism}}</span> | <span>Member No: {{datas.MemberNumber}}</span></div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" ng-disabled="selectedidx==undefined" ng-click="select();">Select</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
